GraphQL 与 Express 教程

1. 简介

GraphQL 是一种用于 API 的查询语言，它允许客户端精确地请求所需的数据，而不是服务器端预定义的固定数据结构。与传统的 RESTful API 相比，GraphQL 提供了更灵活的数据获取方式。在本教程中，我们将学习如何在 Express.js 应用中集成 GraphQL。

2. 环境搭建

在开始之前，确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已安装：

node -v
npm -v

如果没有安装，请访问 Node.js 官网 下载并安装。

3. 创建 Express.js 应用

首先，创建一个新的 Express.js 应用。打开终端并运行以下命令：

mkdir express-graphql-app
cd express-graphql-app
npm init -y
npm install express express-graphql graphql

这将创建一个新的项目目录，并安装 Express、express-graphql 和 graphql 包。

4. 创建第一个 Express.js 应用

在项目根目录下创建一个 index.js 文件，并添加以下代码：

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// 构建 GraphQL 模式
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// 根解析器
const root = {
  hello: () => {
    return 'Hello, GraphQL!';
  }
};

// 创建 Express 应用
const app = express();

// 使用 GraphQL 中间件
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true, // 启用 GraphiQL 界面
}));

// 启动服务器
app.listen(4000, () => {
  console.log('Server is running on http://localhost:4000/graphql');
});

这段代码创建了一个简单的 Express 应用，并集成了 GraphQL。buildSchema 函数用于定义 GraphQL 模式，root 对象包含解析器函数。graphqlHTTP 中间件用于处理 GraphQL 请求。

5. 运行应用

在终端中运行以下命令启动服务器：

node index.js

打开浏览器并访问 http://localhost:4000/graphql，你将看到 GraphiQL 界面，这是一个交互式的 GraphQL IDE。

6. 查询数据

在 GraphiQL 界面中，输入以下查询：

{
  hello
}

点击“运行”按钮，你将看到返回的结果：

{
  "data": {
    "hello": "Hello, GraphQL!"
  }
}

7. 添加更多字段

现在，让我们扩展 GraphQL 模式，添加更多字段。修改 index.js 文件中的 schema 定义：

const schema = buildSchema(`
  type Query {
    hello: String
    user(id: Int!): User
  }

  type User {
    id: Int
    name: String
    email: String
  }
`);

然后，更新 root 解析器：

const root = {
  hello: () => {
    return 'Hello, GraphQL!';
  },
  user: ({ id }) => {
    return {
      id: id,
      name: 'John Doe',
      email: '[email protected]'
    };
  }
};

重新启动服务器，并在 GraphiQL 中运行以下查询：

{
  user(id: 1) {
    id
    name
    email
  }
}

你将看到返回的用户信息。

8. 实践练习

练习 1: 添加更多字段

扩展 GraphQL 模式，添加一个新的查询字段 greet，返回一个问候语。例如：

{
  greet(name: "Alice")
}

练习 2: 处理复杂数据

创建一个新的类型 Post，包含字段 id、title 和 content。添加一个查询字段 posts，返回一个 Post 列表。

9. 总结

在本教程中，我们学习了如何在 Express.js 应用中集成 GraphQL。我们创建了一个简单的 GraphQL 模式，并使用 express-graphql 中间件处理 GraphQL 请求。通过实践练习，我们进一步扩展了 GraphQL 模式，添加了更多字段和复杂数据类型。

GraphQL 提供了强大的数据查询能力，使得客户端能够精确地获取所需的数据。结合 Express.js，你可以构建灵活且高效的 API 服务。

10. 下一步

• 学习如何使用 GraphQL 订阅实现实时数据更新。
• 探索如何使用 GraphQL 与数据库（如 MongoDB 或 PostgreSQL）集成。
• 了解如何使用 Apollo Server 替代 express-graphql。

继续深入学习，你将能够构建更复杂和强大的应用。